<template>
  <div class="article-card-wrapper">
    <div class="article-content">
      <div class="pub-info">
        <em>
          {{ article.authorName }}
        </em>
        <span style="color: var(--gray)">|</span>
        {{ formatDate }}
      </div>
      <h3 class="article-title">
        {{ article.title }}
      </h3>
      <h3 class="article-abstract">
        {{ article.digest }}
      </h3>
    </div>
    <img
      :src="config.baseURL + article.cover"
      alt="cover"
      class="cover"
      v-if="article.cover"
    />
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { format } from '@/utils/time'
import config from '@/config'

const props = defineProps<{
  article: App.Article
}>()

let formatDate = computed(() => {
  return format(props.article.publishDate, 'yyyy-m-d')
})
</script>

<style scoped lang="scss">
@import 'style/shorcut';

$w: var(--articleCardWidth);
$h: var(--articleCardHeight);

.article-card-wrapper {
  box-sizing: border-box;
  width: $w;
  height: $h;
  height: $h;
  padding: calc($h * 0.1) calc($w * 0.04);
  text-align: left;

  .article-content {
    float: left;
    width: calc($w * 0.65);
  }

  .pub-info {
    font-size: calc($h * 0.06);
    line-height: 2;
  }

  .article-title {
    font-size: calc($h * 0.14);
    font-weight: bold;
    color: var(--dark);
    line-height: 1.5;
    margin-bottom: calc($h * 0.05);
    pointer-events: none;
  }

  .article-abstract {
    font-size: calc($h * 0.09);
    color: var(--darkGray);
    line-height: 1.5;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    pointer-events: none;
  }

  .datas {
    margin-top: calc($h * 0.04);

    display: flex;
    justify-content: left;
    align-items: center;

    li {
      i,
      span {
        font-size: calc($h * 0.02);
      }

      span {
        margin-left: calc($h * 0.04);
      }

      &:not(:first-child) {
        margin-left: calc($w * 0.05);
      }
    }
  }

  .cover {
    float: right;
    height: calc($h * 0.8);
    width: calc($w * 0.22);
    opacity: 0.8;
  }
}
</style>
